<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    /*
    1.后代选择器  某个元素的后面 打比方 祖爷爷 爷爷 爸爸 你
    呈现相同样式
    body p{
      background: #3d3920;
    }
    2.子选择器   一代  就儿子
    body>p{
     background: #3d3920;
    }
    3.相邻弟选择器{下一个}  同辈相邻向下
    .active + p{
      background: #244db2;
    }
    4.通用选择器   当前选中的元素向下的所有元素
    .active～p{
      background: #244db2;
    }

    */
    .active～p{
      background: #244db2;
    }

  </style>
</head>
<body>
        <p>p1</p>
        <p class="active">p2</p>
        <p>p3</p>
        <ul>
           <li>
             <p>p4</p>
           </li>
          <li>
             <p>p5</p>
          </li>
          <li>
            <p>p6</p>
          </li>
        </ul>

</body>
</html>
